<template>
  <div class="footer">
    <router-link tag="div" to="./" class="foot-item" >
      <div class="item-img">
        <img class="show" src="https://m.360buyimg.com/mobilecms/jfs/t15145/137/2502885754/3106/de5e0b14/5aa10cd2N46f18ce6.png" alt="">
        <img class="hide" src="https://m.360buyimg.com/mobilecms/jfs/t18526/211/696109898/3876/a61be82c/5aa10cd2N1318ac50.png" alt="">
      </div>
    </router-link>
    <router-link tag="div" to="./category" class="foot-item">
      <div class="item-img">
        <img class="show" src="https://m.360buyimg.com/mobilecms/jfs/t17578/307/690695366/3731/8695ed50/5aa10cdbNf3977e9f.png" alt="">
        <img class="hide" src="https://m.360buyimg.com/mobilecms/jfs/t19183/49/696491919/3763/dec8cceb/5aa10cdbNa9cd0320.png" alt="">
      </div>
    </router-link>
    <div class="foot-item">
      <div class="item-img"><img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t25261/337/1250179439/2765/db2976c3/5b8e4ac3N749fb56e.png" alt=""></div>
    </div>
    <router-link tag="div" to="./shopcart" class="foot-item">
      <div class="item-img"><img src="https://m.360buyimg.com/mobilecms/jfs/t18583/69/717127328/4407/5e47882b/5aa10ceaN649eec12.png" alt=""></div>
    </router-link>
    <router-link tag="div" to="./mine" class="foot-item">
      <div class="item-img">
        <img class="show" src="https://m.360buyimg.com/mobilecms/jfs/t18598/41/712219415/3756/7828621f/5aa10cf6Nbfbdc1af.png" alt="">
        <img class="hide" src="https://m.360buyimg.com/mobilecms/jfs/t17782/11/2358895717/4684/ad19de7f/5af43af1N04ef5a16.png" alt="">
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'CommonFooter'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .router-link-exact-active .show
    display inline-block
  .router-link-exact-active .hide
    display none
  .show
    display none
  .active
    display none
  .footer
    margin: 0
    padding: 0
    position: fixed
    left: 0
    bottom: 0
    z-index: 31
    box-sizing: border-box
    width: 100%
    list-style: none
    background-color: #fff
    box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6)
    -webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6)
    -moz-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6)
    font-size: 16px
    .foot-item
      position: relative
      width: 20%
      height: 2.8em
      box-sizing: border-box
      float: left
      font-size: 16px
      background-color: transparent
      text-align: center
      .item-img img
        width 1.2rem
</style>
